<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<script src="../js/common/jquery.js"></script>
<script src="../js/common/drag.js"></script>
<script src="../js/common/angular.min.js"></script>
<script type="text/javascript" src="../js/common/common.js"></script>
<script type="text/javascript" src="../js/include.js"></script>
</head>
<body ng-app="myApp">

<div class="dqwz">
    <span>当前位置：</span>
    <span>AngularJS 包含</span>
</div>

<section>
    <div>
        <h3>【包含 HTML 内容】</h3>
        <div>
            <div ng-include="'../include/wel.html'">
            </div>
        </div>
        <!-- 查看源码开始 -->
        <div class="htmlCode">
            <span>【html源码】</span>
            <xmp ng-non-bindable>
<div>
    <div ng-include="'../include/wel.html'">
    </div>
</div>
            </xmp>
            <span>【js源码】</span>
            <xmp>
app.controller('htmlCtrl',function($scope){
    //代码块
})
            </xmp>
            <span>【include源码】</span>
            <xmp>
<div ng-controller="htmlCtrl">
    <h1>angularJs教程</h1>
    <p>这是一个被包含的 HTML 页面，使用 ng-include 指令来实现！</p>
</div>
            </xmp>
            <span class="close"><a href="javascript:;">关闭</a></span>
        </div>
        <div class="viewCode">
            <span><a href="javascript:;"> >>查看源码</a></span>
        </div>
        <!-- 查看源码结束 -->
    </div>
    <div>
        <h3>【包含 AngularJS 代码】</h3>
        <div>
            <div ng-include="'../include/sites.html'">
            </div>
        </div>
        <!-- 查看源码开始 -->
        <div class="htmlCode">
            <span>【html源码】</span>
            <xmp ng-non-bindable>
<div>
    <div ng-include="'../include/sites.html'">
    </div>
</div>
            </xmp>
            <span>【js源码】</span>
            <xmp>
app.controller('jsCtrl',function($scope,$http){
    $http.get('../php/tableData.php').then(function successCallback(reponse){
        $scope.students = reponse.data.studentObj;
    },function errorCallback(reponse){
        $scope.errorInfo = '请求失败';
    })
})
            </xmp>
            <span>【include源码】</span>
            <xmp ng-non-bindable>
<table style="width: 100%;" border="1px" ng-controller="jsCtrl">
    <div>
        <tbody>
            <tr ng-repeat="x in students">
                <td>{{x.name}}</td>
                <td>{{x.age}}岁</td>
                <td>{{x.height}}cm</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td class="red">{{errorInfo}}</td>
            </tr>
        </tfoot>
    </div>
</table>
            </xmp>
            <span>【php源码】</span>
            <xmp>
<?php
echo <<<EOT
{
"studentObj":[
{"name":"小李","age":"25","height":"175"},
{"name":"小华","age":"26","height":"177"},
{"name":"小明","age":"23","height":"172"},
{"name":"小红","age":"24","height":"165"},
{"name":"小张","age":"25","height":"173"}
]
}
EOT;
?>
            </xmp>
            <span class="close"><a href="javascript:;">关闭</a></span>
        </div>
        <div class="viewCode">
            <span><a href="javascript:;"> >>查看源码</a></span>
        </div>
        <!-- 查看源码结束 -->
    </div>
</section>

<div class="mask_layer">
</div>

</body>
</html>